<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="../lib/resources/css/ext-all.css"/>
        <script type="text/javascript" src="../lib/js/ext-base-debug.js">
        </script>
        <script type="text/javascript" src="../lib/js/ext-all-debug.js">
        </script>
        <script type="text/javascript" src="../lib/js/ext-lang-zh_CN.js">
        </script>
        <style type="text/css">
            body {
                padding: 20px;
                font-size: 10px;
                line-height: 12px;
            }
        </style>
        <script type="text/javascript">
            Ext.onReady(function(){
                new Ext.form.ComboBox({
                    renderTo: 'combo',
                    emptyText: '请选择..',//提示字符串
                    forceSelection: true,//强制选择
                    triggerAction: 'all',//点击下拉按钮全部显示
                    mode: 'local',
                    store: new Ext.data.ArrayStore({
                        fields: ['id', 'name'],
                        data: [['1', 'aaa'], ['2', 'bbb'], ['3', 'ccc']]
                    }),
                    displayField: 'id',
                    valueField: 'id',
                    lazyInit: false,
                    listeners: {
                        render: {//只有expand之后才可获得view对象
                            fn: function(combo){
                                var view = combo.view;
                                var store = combo.getStore();
                                combo.tip = new Ext.ToolTip({
                                    target: view.el, //整体目标对象
                                    delegate: '.x-combo-list-item ',//每次选中list都显示Tip
                                    trackMouse: true,
                                    renderTo: document.body,//实例化时渲染到body元素
                                    listeners: { //显示之前改变文本内容
                                        beforeshow: function updateTipBody(tip){
                                            var name = view.getRecord(tip.triggerElement).get('name');//获取对应Record对象的name值
                                            tip.body.dom.innerHTML = 'Over Record ID ' + name;
                                        }
                                    }
                                });
                            },
                            single: true//执行一次后销毁
                        }
                    }
                });
                
               
            });
        </script>
    </head>
    <body>
        <div id="combo" width="80px">
        </div>
		<div style="width:400px;height:400px;border:1px solid black;">
			<div style="width:300px;height:300px;border:1px solid black;vertical-align:middle;"></div>
		</div>
    </body>
</html>
